<template>
    <Modal
        :title="modalTitle"
        v-model="isShow"
        :width="700"
        @on-ok="ok"
        @on-cancel="cancel"
        @on-visible-change="change">
        <div class="select-item">
            <ul class="select-father" v-if="dataList.length!=0">
                <li :class="{'active':fatherActive==index,'disabled':item.n.length==0}" v-for="(item,index) in dataList" :key="index" @click="selectFather(index,item.n.length==0)">{{item.c}}</li>
            </ul>
            <ul class="select-child" v-if="childList.length!=0">
                <li v-for="(item,index) in childList" :key="index" @click="selectChild(item.cn)">{{item.cn}}</li>
            </ul>
        </div>
        <div class="check-item" v-if="activeList.length!=0 && !justOne">
            <ul>
                <li v-for="(item,index) in activeList" :key="index" @click="remove(index)">{{item}}<Icon class="remove-item" type="ios-close-empty"></Icon></li>
            </ul>
        </div>
    </Modal>
</template>

<script>
    /**
    *   简单说明： 这个是弹出框选择部分数据的页面
    *   如果是多选的话，justOne设置成false或者不添加这个属性就行了，返回的会是一个数组，
    *   如果是单选的话，justOne一定要设置成true,返回的会是一个字符串
    *
    *   父组件的相关示例代码：
    *
    *   <button @click="toggleModal(true)">出来吧，弹出框</button>
    *
    *   <alertModal :justOne="false" :modalTitle="modalTitle" :showModal="isShow" :dataJson="carBusinessJson" :resultArr="resultArr" @toggleModal="toggleModal" @selectResult="getResult"></alertModal>
    *
    *   import {carBusinessJson} from 'commons/js/data/carBusiness.js';
    *   data(){
    *       return{
    *           modalTitle: '选择主修品牌',   //弹框title
    *           isShow: false,  //弹框是否显示
    *           carBusinessJson,    //元数据
    *           resultArr: []   //结果集（多选设置成数组，单选设置成字符串）
    *       }
    *   },
    *   methods: {
    *       toggleModal(v){
    *           this.isShow = v;
    *       },
    *       getResult(val){
    *           this.resultArr = val;
    *       }
    *   }
    */
    export default {
        props: {
            justOne: {
                type: Boolean,
                default: false
            },
            modalTitle: {
                type: String,
                default: '请选择'
            },
            showModal: {//父组件传过来的显示隐藏弹出框的值
                type: Boolean,
                default: false
            },
            dataJson: {//父组件传过来的弹出框数据源
                type: Array,
                default: []
            },
            resultArr: {//父组件传过来的弹出框数据源
                type: [Array,String]
            },
        },
        data(){
            return {
                isShow: false,//弹窗框显示隐藏状态
                dataList: [],//父级列表数组
                childList: [],//自己列表数组
                activeList: [],//结果列表数组
                fatherActive: 0,//父级当前选中index
            }
        },
        watch: {
            'showModal': 'setIsShow'
        },
        created() {
            this.init();
        },
        methods: {
            //获取文件里的数组，赋值给父子ul列表
            init() {
                this.dataList = this.dataJson;
                this.childList = this.dataList[0].n;
                this.activeList = this.resultArr;
            },
            //根据父组件的显示值决定本组件的弹框显示和隐藏状态
            setIsShow() {
                this.isShow = this.showModal;
            }, 
            //选中父级列表时，显示对应的子级列表
            selectFather(i,disabled) {
                if(disabled) return;//如果父级列表没有数据时，点击失效
                this.childList = this.dataList[i].n;
                this.fatherActive = i;
            },
            //选中子级列表时，设置选中结果列表
            selectChild(n) {
                if(this.justOne){
                    this.$emit('selectResult',n);
                    this.$emit('toggleModal',false);
                }
                else{
                    if(this.activeList.filter(item => item == n).length!=0) return;//如果已经选中过，则不再添加进结果数组
                    this.activeList.push(n);
                }
            },
            //删除结果数组里的某一项
            remove(i) {
                this.activeList.splice(i,1);
            },
            //当弹框显示隐藏状态变化时，告诉父组件改变对应值
            change(v) {
                this.$emit('toggleModal',v);
            },
            //弹框确定按钮回调
            ok() {
                this.$emit('selectResult',this.activeList);
            },
            //弹框取消按钮回调
            cancel() {
                
            },
        }
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    li{
        display: inline-block;
        margin-right: 10px;
        cursor: pointer;
        margin-bottom: 10px;
        padding: 0 3px;
    }
    .select-father,.select-child{
        margin-bottom: 20px;
    }
    .select-father{
        li.active{
            color: #fff;
            background-color: @color-Primary;
            //padding: 0 5px;
            border-radius: 4px;
        }
        li.disabled{
            color: @color-Disabled;
        }
    }
    .check-item{
        border-top: 1px solid @color-Divider;
        padding-top: 20px;

        li{
            background-color: @color-Background;
            border: 1px solid @color-Border;
            border-radius: 4px;

            .remove-item{
                margin-left: 5px;
                font-size: 14px;
                color: @color-Content;
            }
        }
    }
</style>